{% extends "indoors.html" %}
{% load humanize %}

{% block head %}
<script>
$(document).ready(function(){    

});
</script>
<style>
  .error {
    color: red;
  }
</style>
{% endblock head %}

{% block title %}Settings{% endblock title %}

{% block content %}
<h2>
  User Settings
</h2>
<span class="error">{{error_message}}</span>
<span class="info">{{info_message}}</span>
<ul data-role="listview" data-inset="true">
  <li data-role="list-divider">Change Password</li>
  <li>
    <form action="/a/settings" method="POST">
      {% csrf_token %}
      <input type="hidden" name="command" value="change_password">
      <div id="password_change_container">
        <div data-role="fieldcontain">
          <label for="old_password">Old Password</label>
          <input type='password' name='old_password' placeholder="Old password">
        </div>
        <div data-role="fieldcontain">
          <label for="new_password">New Password</label>
          <input type='password' name='new_password' placeholder="New password">
        </div>
        <div data-role="fieldcontain">
          <label for="confirm_password">Confirm Password</label>
          <input type='password' name='confirm_password' placeholder="Confirm password">
        </div>
        <input type='submit' id="submit" value="Change Password">
      </div>
    </form>
  </li>
</ul>
<a href="/a/logout" data-role="button" data-theme="e">
  Logout
</a>
{% endblock %}